<template>
  <basic-container>
    <el-container>
      <el-aside class="aside-box modules-box">
        <h2 class="flex custor-title">
          客户列表
          <el-button type="primary" @click="addCurstormer">新增客户</el-button>
        </h2>
        <div class="search-container">
          <el-form :model="form">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-select
                  v-model="form.province"
                  placeholder="省"
                  size="small"
                  @change="changeProvince"
                >
                  <el-option
                    v-for="item in province"
                    :key="item.key"
                    :label="item.title"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select
                  v-model="form.city"
                  placeholder="市"
                  size="small"
                  @change="changeCity"
                >
                  <el-option
                    v-for="item in city"
                    :key="item.key"
                    :label="item.title"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select v-model="form.area" placeholder="区" size="small">
                  <el-option
                    v-for="item in area"
                    :key="item.key"
                    :label="item.title"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row class="flex">
              <el-input
                style="margin-right: 10px"
                v-model="form.customerName"
                placeholder="请输入客户"
              ></el-input>
              <el-button type="primary" size="mini" @click="searchHandler"
                >搜索</el-button
              >
              <el-button type="primary" size="mini" @click="resetSearch"
                >清空</el-button
              >
            </el-row>
          </el-form>
        </div>
        <div class="tree-title">客户数量 （{{ page.total }}）</div>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click.self="handleNodeClick"
          node-key="id"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span style="float: right">
              <el-dropdown style="color: #333">
                <span class="el-dropdown-link">...</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div @click.stop="() => editCurstormer(data)">修改</div>
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="data.level == 3">
                    <span @click.stop="() => rowDel(data)">删除</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </el-tree>
        <el-pagination
          class="custormer-pagination"
          @size-change="sizeChange"
          @current-change="currentChange"
          @prev-click="currentChange"
          @next-click="currentChange"
          background
          layout="prev, pager, next"
          :page-size="page.pageSize"
          :current-page="page.currentPage"
          :total="page.total"
        >
        </el-pagination>
      </el-aside>
      <el-main class="custormer-container" v-loading="mainLoading">
        <div class="modules-box">
          <h3 class="main-title">{{ custormerDetails.customerName }}</h3>
          <div class="custor-info flex">
            <div class="info-left flex">
              <div class="info-portrait"></div>
              <div>
                <h4>{{ custormerDetails.customerName }}</h4>
                <p>{{ custormerDetails.customerNo }}</p>
              </div>
            </div>
            <!-- <div class="info-right flex flex-center">
              <p>{{ custormerDetails.credit }}</p>
              客户风险评分
            </div> -->
          </div>
          <el-row :gutter="10">
            <el-col span="8"
              >客户类别：{{ custormerDetails.customerClassString }}</el-col
            >
            <el-col span="8"
              >行业分类：{{ custormerDetails.industryClassString }}</el-col
            >
          </el-row>
          <el-row :gutter="10">
            <el-col span="8"
              >地理区域：{{ custormerDetails.regionString }}</el-col
            >
            <el-col span="8">联系人：{{ custormerDetails.contactName }}</el-col>
            <el-col span="8"
              >联系方式：{{ custormerDetails.contactTel }}</el-col
            >
          </el-row>
          <el-row :gutter="10">
            <el-col span="24">备注信息：{{ custormerDetails.remarks }}</el-col>
          </el-row>
        </div>
        <div class="modules-box">
          <!-- 底部tab栏 -->
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本资料" name="first">
              <basicInformation :details="custormerDetails" />
            </el-tab-pane>
            <el-tab-pane label="配网营销" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="合约信息" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="设备信息" name="fourth"
              >定时任务补偿</el-tab-pane
            >
            <el-tab-pane label="拜访信息" name="fiveth">拜访信息</el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
    <addCustormer
      v-model="addDialog"
      :getInitData="getInitData"
      :type="type"
      :editForm="editForm"
    />
  </basic-container>
</template>

<script>
import basicInformation from "./components/custormer/basicInformation";
import addCustormer from "./components/custormer/addCustormer";
import { getLazyTree } from "@/api/base/region";
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  getTreeList,
} from "@/api/meter/customer";
export default {
  data() {
    return {
      id: "",
      type: "add", // 当前弹窗模式
      addDialog: false,
      mainLoading: false,
      treeData: [],
      form: {}, // 搜索条件
      activeName: "first",
      defaultProps: {
        children: "child",
        label: "customerName",
      },
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
      },
      custormerDetails: {},
      editForm: {},
      province: [],
      city: [],
      area: [],
    };
  },
  mounted() {
    this.getInitData();
    getLazyTree("00").then((res) => {
      this.province = res.data.data;
    });
  },
  methods: {
    changeProvince(value) {
      getLazyTree(value).then((res) => {
        this.city = res.data.data;
      });
    },
    changeCity(value) {
      getLazyTree(value).then((res) => {
        this.area = res.data.data;
      });
    },
    addCurstormer() {
      this.type = "add";
      this.addDialog = true;
    },
    editCurstormer(data) {
      this.type = "edit";
      this.addDialog = true;
      getDetail(data.id).then((res) => {
        this.editForm = res.data.data;
      });
    },
    sizeChange(size) {
      this.page.pageSize = size;
      this.id = "";
      this.getInitData();
    },
    currentChange(page) {
      this.page.currentPage = page;
      this.id = "";
      this.getInitData();
    },
    getInitData() {
      const { form } = this;
      let regionId = form.province;
      if (form.city) {
        regionId = form.city;
      }
      if (form.area) {
        regionId = form.area;
      }
      getList({
        customerName: this.form.customerName,
        regionId: regionId,
        current: this.page.currentPage,
        size: this.page.pageSize,
      }).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.treeData = data.records;
        this.$nextTick(() => {
          if (this.treeData.length > 0 && !this.id) {
            this.$refs.tree.setCurrentKey(this.treeData[0].id);
            this.handleNodeClick({
              id: this.treeData[0].id,
            });
          } else if (this.treeData.length > 0 && this.id) {
            this.$refs.tree.setCurrentKey(this.id);
            this.handleNodeClick({
              id: this.id,
            });
          }
        });
      });
    },
    resetSearch() {
      this.form = {};
      this.getInitData();
    },
    searchHandler() {
      this.page.currentPage = 1;
      this.getInitData();
    },
    handleNodeClick(data) {
      // 切换客户
      this.mainLoading = true;
      getDetail(data.id)
        .then((res) => {
          this.id = data.id;
          this.custormerDetails = res.data.data;
          this.mainLoading = false;
        })
        .catch(() => {
          this.mainLoading = false;
        });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          if (row.id === this.id) {
            this.id = "";
          }
          this.getInitData();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
  },
  components: {
    basicInformation,
    addCustormer,
  },
};
</script>

<style lang="scss" scoped>
// 左侧区域
.search-container {
  margin-bottom: 20px;
}
.custor-title {
  width: 100%;
  font-size: 20px;
  font-weight: 400;
  align-items: center;
  justify-content: space-between;
}
.aside-box {
  overflow: hidden;
}
.modules-box {
  border: 1px solid #e1e1e1;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.tree-title {
  width: 100%;
  font-size: 16px;
  padding-bottom: 10px;
}
// 主区域
.custormer-container {
  padding-left: 10px !important;
  box-sizing: border-box;
  .main-title {
    width: 100%;
    border-bottom: 1px solid #e1e1e1;
    font-weight: 400;
    padding-bottom: 20px;
    margin: 20px 0;
  }
  .custor-info{
    margin-bottom: 20px;
  }
  .custor-info {
    justify-content: space-between;
    padding: 0 20px;
    .info-portrait {
      width: 100px;
      height: 100px;
      margin-right: 20px;
      border-radius: 50%;
      border: 1px solid #e1e1e1;
      background: url("/img/portrait.png") no-repeat center center / 50% auto;
    }
    .info-right {
      width: 120px;
      height: 120px;
      flex-direction: column;
      border: 3px solid #e1e1e1;
      border-radius: 50%;
      p {
        margin: 0;
      }
    }
  }
}
.custom-tree-node {
  width: 100%;
  padding-right: 10px;
}
</style>
<style lang="scss">
.custormer-container .el-row {
  width: 100%;
  overflow: hidden;
}
.custormer-pagination {
  margin-top: 30px;
  text-align: center;
}
</style>
